<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>ToDoList</title>
		<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="toDolist.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			body {
				background-color: #ccc;
			}
			li {
				list-style: none;
			}
			input {
				outline: none;
			}
			a {
				text-decoration: none;
				color: black;
			}
			header {
				border: 1px solid #ccc;
				height: 50px;
				background-color: #000;
			}
			section {
				width: 600px;
				margin: auto;
			}
			label {
				font-size: 22px;
				line-height: 50px;
				color: #fff;
			}
			input#title {
				display: block;
				float: right;
				border-radius: 5px;
				width: 350px;
				height: 25px;
				margin-top: 11px;
				margin-right: 10px;
			}
			h2 {
				margin-top: 20px;
			}
			span {
				float: right;
				display: block;
				padding: 0 5px;
				height: 20px;
				margin-top: 7px;
				background-color: #fff;
				margin-right: 15px;
				border-radius: 5px;
				font-size: 10px;
				text-align: center;
				line-height: 20px;
				font-weight: 0;
				border-radius: 50%;
				color: gray;
			}
			footer {
				width: 150px;
				margin: 20px auto;
				font-weight: 0;
				color: #808080;
			}
			li {
				margin: 10px 0;
				width: 600px;
				height: 30px;
				background-color: #fff;
				border-radius: 5px;
			}
			#donelist li {
				background-color: #808080;
				opacity: 0.5;
			}
			li input {
				float: left;
				width: 20px;
				height: 20px;
				margin: 5px 20px;
			}
			li p {
				width: 500px;
				float: left;
				line-height: 30px;
			}
			li a {
				display: block;
				cursor: pointer;
				float: right;
				margin-top: 6px;
				margin-right: 15px;
				width: 15px;
				height: 15px;
				border: 2px solid #CCCCCC;
				border-radius: 50%;
				background-color: #808080;
			}
			li a span {
				float: none;
				margin-top: 6px;
				margin-left: 3px;
				width: 8px;
				height: 3px;
				padding: 0;
				background-color: #fff;
			}
		</style>
	</head>
	<body>
		<header>
			<section>
				<label for="title">ToDoList</label>
				<input type="text" id="title" name="tilte" placeholder="添加ToDo" />
			</section>
		</header>
		<section>
			<h2>正在进行<span id="todocount">0</span></h2>
			<ol id="todolist" class="demo-box">
				
			</ol>
			<h2>已经完成<span id="donecount">0</span></h2>
			<ul id="donelist">
				
			</ul>
		</section>
		<footer>
			2022 todolist.cn
		</footer>
	</body>
</html>
